<!-- 备注编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="1300"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <ele-pro-table
      ref="tableRef"
      row-key="userId"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      v-model:selections="selections"
      highlight-current-row
      border
      stripe
      :show-summary="true"
      :summary-method="getSummaries"
    >
      <template #toolbar="{}">
        <el-button type="success" @click="exportExcel" :icon="DocumentCopy">
          导出表格
        </el-button>
      </template>
      <template #amount="{ row }">
        <span :class="amountClass(row)">
          {{ row.Amount }}
        </span>
      </template>
      <template #company_pay="{ row }">
        <span class="warning">
          {{ row.companyPay }}
        </span>
      </template>
      <template #realname="{ row }">
        <span class="pointer blue" @click="showStudentDetail(row)">
          {{ row.member }}
        </span>
      </template>
    </ele-pro-table>

    <!-- 学生详情 -->
    <Detail v-model="showDetail" :student-id="currentId" />
  </ele-modal>
</template>

<script setup>
  import { ref, watch } from 'vue';
  import { pageSalaryDetail, exportSalaryDetail } from '@/api/company';
  import Detail from '@/views/student/components/detail.vue';
  import { DocumentCopy } from '@element-plus/icons-vue';
  import { EleMessage } from 'ele-admin-plus/es';
  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    data: Object
  });
  const emit = defineEmits(['done', 'update:modelValue']);
  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = ref([
    {
      slot: 'realname',
      label: '姓名',
      width: 100
    },
    {
      prop: 'belongs_date',
      label: '所属月份',
      align: 'center',
      width: 100
    },
    {
      prop: 'work_date',
      label: '工资日期',
      align: 'center',
      width: 140
    },

    {
      slot: 'amount',
      label: '发放金额',
      width: 100
    },
    {
      slot: 'company_pay',
      label: '应回金额',
      width: 100
    },
    {
      prop: 'quantity',
      label: '对账工时',
      width: 90
    },
    {
      prop: 'priceCompany',
      label: '对账价格',
      width: 90
    },
    {
      prop: 'remark',
      label: '工资说明备注'
    },
    {
      prop: 'create_user',
      label: '提交人',
      width: 80
    },
    {
      prop: 'judge_user',
      label: '审核人',
      width: 80
    },
    {
      prop: 'judge_time',
      label: '审核时间',
      width: 150,
      align: 'center'
    }
  ]);

  /** 表格选中数据 */
  const selections = ref([]);

  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return pageSalaryDetail({
      ...where,
      ...orders,
      page,
      limit,
      status: 200,
      salary_id: props.data.id,
      tenant_id: props.data.tenant_id,
      cate: '全部'
    });
  };

  const amountClass = (row) => {
    let blue = 'blue';
    let red = 'red';
    return row.amount < row.company_pay ? blue : red;
  };

  const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];

    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = '小计';
        return;
      }

      if (index === 3) sums[index] = safeSum(data, 'Amount');
      if (index === 4) sums[index] = safeSum(data, 'companyPay');
      if (index === 5) sums[index] = safeSum(data, 'quantity');
    });

    return sums;
  };

  const safeSum = (data, key) => {
    return data
      .map((item) => parseFloat(item[key]) || 0) // 强制转换为数字，失败则返回 0
      .reduce((sum, num) => sum + num, 0)
      .toFixed(2);
  };

  const currentId = ref(0);
  /** 学生详情 */
  const showDetail = ref(false);
  const showStudentDetail = (row) => {
    currentId.value = row.member_id ?? 0;
    showDetail.value = true;
  };
  /** 导出表格 */
  const exportExcel = () => {
    const loading = EleMessage.loading({ message: '正在加载中..', mask: true });
    tableRef.value?.fetch(({ where }) => {
      // 方法的参数与数据源的完全一致
      // 请求查询全部接口
      console.log(where);
      var requestData = where;
      requestData.limit = 99999999;
      requestData.page = 1;

      exportSalaryDetail(requestData)
        .then((res) => {
          loading.close();
          window.open(res);
        })
        .catch(() => {
          loading.close();
        });
    });
  };
  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  const title = ref('');

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value = '工资发放明细';
      } else {
        console.log('什么也没发生');
      }
    }
  );
</script>
